<template>
  <div class="recruitmentManagement">
    <van-sticky>
      <van-nav-bar title="工资信息" left-arrow @click-left=backMinePage>
        <template #right>
          <van-icon
            @click="searchBoxShow = !searchBoxShow; toClearKeyWord(!!searchParams.keyword)"
            name="search" size="20" style="margin-right: 20px;"
          />
          <van-icon name="ellipsis" size="18" @click="showOverlay = true" />
        </template>
      </van-nav-bar>
      <van-search
        v-show="searchBoxShow"
        v-model="searchParams.keyword"
        placeholder="请输入企业名、报名人姓名、职位名搜索"
        show-action
        shape="round"
        @search="onSearch"
        @clear="toClearKeyWord"
      >
        <div slot="action" @click="onSearch">搜索</div>
      </van-search>
    </van-sticky>

    <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="over_layer">
      <van-cell-group class="layer">
        <van-cell
          @click="goWorkInfo(item)"
          v-for="(item, index) in navList"
          :key="index"
          :value="item.text"
          :icon="item.icon"
        />
      </van-cell-group>
    </van-overlay>

    <com-filter-menu
      :rightOptionObj="rightOptionObj"
      :rightOption="rightOption"
      :rightValue="searchParams.filterType"
      @getFilterMenuValue="toGetFilterMenuValue_salary"
    >
    </com-filter-menu>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="jobArr">
        <job-item-for-recruit
          v-for="(item, index) in needObj"
          :key="index"
          :salary="1"
          :jobItem="item"
          :keyWord="'recruitmentManagement'"
          :advaceInfoType="3"
          :searchType="1"
        ></job-item-for-recruit>

        <van-pagination
          v-show="total > 0"
          style="margin: 10px 0"
          v-model="searchParams.pageIndex"
          :total-items="total"
          :items-per-page="searchParams.pageSize"
          @change="handlePaginationChange"
        >
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
          <template #page="{ text }">{{ text }}</template>
        </van-pagination>
      </div>

      <!--<nut-drag direction="y" :style="{right:'0px', top:'66%'}" class="quick_links">
        <nut-fixednav
          :nav-list="navList" @selected="selected" class="quick_links_detail"
          active-text="收起" un-active-text="导航"
        ></nut-fixednav>
      </nut-drag>-->
    </van-pull-refresh>
    <!-- 底部栏 -->
    <com-my-company-tar-bar></com-my-company-tar-bar>
  </div>
</template>

<script>
import comMyCompanyTarBar from '../../../components/comMyCompanyTarbar'
import comFilterMenu from '../../../components/comFilterMenu'
import jobItemForRecruit from "./common/jobItemForRecruit";
import {obj} from '../../../constants/comUtils'
import {GoWorkInfo} from '../../../utils/recruitToUrl'

import quickMenu from './common/quickMenu'
import {navList} from "./common/comConstant";

import {reqGetlistsOwner} from '@/api/myCompany.js'

import {Toast} from 'vant'

const rightOptionObj = {
  all: '全部',
  salaryFeePay: '工资待付',
  dzFeePay: '代招费待付',
}
const rightOption = [
  {text: '全部', value: 'all'},
  {text: '工资待付', value: 'salaryFeePay'},
  {text: '代招费待付', value: 'dzFeePay'}
]

export default {
  name: 'salary',
  components: {
    quickMenu,
    jobItemForRecruit,
    comFilterMenu,
    comMyCompanyTarBar
  },
  data() {
    return {
      isLoading: false,
      rightValue: '',
      rightOption,
      rightOptionObj,
      showOverlay: false,
      searchBoxShow: false,
      navList,
      needObj: obj,

      /*
       * quickMenu 组件需要，暂时保留
       * */
      icons: ['fa fa-github', 'fa fa-comment', 'fa fa-code', 'fa fa-envelope'],
      list: [{isLink: false}, {isLink: true, url: '/mime'}, {isLink: true, url: '/'}, {isLink: false}],

      searchType: false,

      total: 0, // 总记录数


      // 检索参数
      searchParams: {
        status: 1,
        keyword: '', // 搜索关键字
        pageIndex: 1, // 当前页
        pageSize: 10, // 每页显示条数
        filterType: 'all',
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    //下拉刷新
    onRefresh() {
      // this.needObj = obj
      this.pageIndex = 1
      this.getData('refresh')
    },
    async getData(e) {
      const comMesRes = await this.$api.myCompany.reqGetSalaryJobList(this.searchParams)
      if (comMesRes.code === 200) {
        this.needObj = comMesRes.data.items
        this.total = comMesRes.data.count
        this.isLoading = false
        if (e) {
          Toast('刷新成功')
        }
      }
    },
    // goNeedPage_recruitStaff(val){
    //   const keyWord = 'recruitStaff';
    //   if (val === 'search'){
    //     this.$router.push({
    //       path: `/searchRecords/${keyWord}`,
    //     })
    //   }
    // },

    // 搜索
    /*onSearch() {
      this.pageIndex = 1
      this.getData()
    },*/

    onSearch() {
      this.searchParams.pageIndex = 1
      if(this.searchParams.keyword.trim()){
        this.getData();
      } else {
        Toast('请先输入！');
      }
    },

    toClearKeyWord(isQuery = true){
      if(!isQuery){
        return null
      }
      this.searchParams.keyword = '';
      this.searchParams.pageIndex = 1
      this.$nextTick(() => {
        this.getData();
      })
    },
    backMinePage(){
      localStorage.removeItem('tabItemIndex_myCompany');
      this.$router.push('/mine');
    },

    //右上角---跳转页面
    goWorkInfo(data) {
      GoWorkInfo(data)
    },
    selected($event) {
      console.log('当前点击', $event.item)
    },

    toGetFilterMenuValue_salary(val) {
      console.log('传值---工资', val)
      this.titleName = this.rightOptionObj[val];

      Object.assign(this.searchParams, {
        pageIndex: 1,
        // 工资：新增需求的字段
        filterType: val
      });

      this.getData()
    },

    handlePaginationChange(pageIndex) {
      this.pageIndex = pageIndex
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.recruitmentManagement {
  width: 100%;
  min-height: 100vh;
  .over_layer {
    margin-top: 46px;
    height: 100%;
    .layer {
      width: 42%;
      font-size: 14px;
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }
  /deep/ .quick_links {
    .nut-fixednav.active .fixed-list {
      right: 0;
    }
    .quick_links_detail {
      .fixed-list {
        right: -110%;
        li {
          min-width: 1.56rem;
          img {
            /*display: none;*/
          }
          span {
            /*border: 1px solid blue;*/
          }
        }
      }
    }
  }
}
</style>
